<template>
    <div class="icons">

      <swiper  :options="swiperOption">
        <swiper-slide v-for="(page, index) of pages" :key="index">
        <div
            class="icon"
            v-for="item of page"
            :key="item.id">
          <div class="icon-img">
          <img class="icon-img-content" :src="item.img" />
          </div>
          <p class="icon-desc">{{item.desc}}</p>
        </div>
        </swiper-slide>
      </swiper>
    </div>
</template>

<script>
    export default {
        name: "HomeIcons",
        data (){
          return {
            swiperOption:{
              autoplay:false
            },
            iconList:[{
              id: "0001",
              img: "http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png",
              desc:"景点门票"
            },
              {
                id: "0002",
                img: "http://img1.qunarzz.com/piao/fusion/1804/5a/13ceb38dcf262f02.png",
                desc:"一日游"
              },
              {
                id: "0003",
                img: "http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20192/e5932c5b882f24c89503bfd037597d12.png",
                desc:"新春灯会"
              },
              {
                id: "0004",
                img: "http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20191/de711920c71e38287d9f95f7910aa1aa.png",
                desc:"精品小团"
              },
              {
                id: "0005",
                img: "http://img1.qunarzz.com/piao/fusion/1804/ff/fdf170ee89594b02.png",
                desc:"西安必游"
              },
              {
                id: "0006",
                img: "http://img1.qunarzz.com/piao/fusion/1803/76/eb88861d78fb9902.png",
                desc:"动植物园"
              },
              {
                id: "0007",
                img: "http://img1.qunarzz.com/piao/fusion/1803/20/831d62d2e1c7be02.png",
                desc:"华清池"
              },
              {
                id: "0008",
                img: "http://img1.qunarzz.com/piao/fusion/1803/fa/2548667cb6e902.png",
                desc:"兵马俑"
              },
              {
                id: "0009",
                img: "http://img1.qunarzz.com/piao/fusion/1803/ab/6f7d6e44963c9302.png",
                desc:"泡温泉"
              }]
          }
        },
      computed: {
          pages (){
            const pages = []
            this.iconList.forEach((item,index)=>{
              const page = Math.floor(index / 8)
              if (!pages[page]){
                pages[page]=[]
              }
              pages[page].push(item)
            })
            return pages
          }
      }
    }
</script>

<style lang="stylus" scoped>
  @import "~css/varibles.styl"
  @import "~css/mixins.styl"
  .icons >>> .swiper-container
    height:0
    padding-bottom :50%
  .icons
    margin-top :.1rem
    .icon
      position :relative
      overflow :hidden
      height:0
      float: left
      width: 25%
      padding-bottom 25%

      .icon-img
        position: absolute
        top:0
        left:0
        right:0
        bottom:.44rem
        box-sizing :border-box
        padding :.1rem
        .icon-img-content
            display:block
            height: 100%
            margin :0 auto
      .icon-desc
        position: absolute
        left :0
        right:0
        bottom:0
        line-height :.44rem
        height:.44rem
        color:$darkTextColor
        text-align:center
        ellipsis()
</style>
